<template>
  <div class="choiceGoods">
    <el-dialog
      :title="dialogVisibleTile"
      :visible.sync="dialogVisible"
      width="780px"
      :destroy-on-close="true"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        :labelWidth="labelWidth"
        class="demo-ruleForm"
      >
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24">
            <el-form-item label="商品类目：" prop="spfl">
              <el-select
                v-model="ruleForm.spfl"
                placeholder="请选择商品类目"
                style="width:100%"
                clearable
                @change="chioseGoods"
              >
                <el-option
                  :value="item.value"
                  v-for="(item,index) in spflList"
                  :key="index"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item label="商品名称：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入商品名称">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" style="text-align: center">
            <el-transfer
              style="text-align: left; display: inline-block"
              v-model="ruleForm.chioseVal"
              :titles="['全选商品', '已选商品']"
              :button-texts="['到左边', '到右边']"
              @change="handleChange"
              :format="{
                noChecked: '${total}',
                hasChecked: '${checked}/${total}'
              }"
              :data="data"
            ></el-transfer>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSure()" :loading="loading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisibleTile: "",
      loading: false,
      labelWidth: "120px",
      rules: {
        lmmc: [
          {
            required: true,
            message: "请输入分组名称，不超过15个字",
            trigger: "blur"
          }
        ]
      },
      ruleForm: {},
      spflList: [
        //商品类目
        {
          label: "类型1",
          value: 1
        },
        {
          label: "类型2",
          value: 2
        },
        {
          label: "类型3",
          value: 3
        }
      ],
      data: [
        {
          key: "脉动菠萝味500ml",
          label: "脉动菠萝味500ml"
        },
        {
          key: "可口可乐330ml",
          label: "可口可乐330ml"
        },
        {
          key: "可口可乐200ml",
          label: "可口可乐200ml"
        }
      ]
    };
  },
  methods: {
    handleSure() {
      this.$emit("trigger", this.ruleForm);
      this.handleClose();
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleChange() {},
    chioseGoods(e) {
      console.log(e);
      if (e) {
        this.data = [
          {
            key: 0,
            label: "脉动菠萝味500ml"
          },
          {
            key: 1,
            label: "可口可乐330ml"
          }
        ];
      } else {
        this.data = [
          {
            key: 0,
            label: "脉动菠萝味500ml"
          },
          {
            key: 1,
            label: "可口可乐330ml"
          },
          {
            key: 2,
            label: "可口可乐330ml"
          },
          {
            key: 3,
            label: "可口可乐200ml"
          }
        ];
      }
    }
  }
};
</script>

<style>
</style>